<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Login Page | Amaze UI Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="__PUBLIC__/vendor/assets/i/favicon.png">
    <link rel="stylesheet" href="__PUBLIC__/vendor/assets/css/amazeui.min.css"/>
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
        #capital {
            color: #F90;
            padding: 2px;
            position: absolute;

        }
        .error{
            color:red;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>用户登录</h1>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-4 am-u-md-8 am-u-sm-centered">
        <h3>请填写：</h3>
        <hr>
        <div class="am-btn-group">
            <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>
            <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i>
                Google+</a>
            <a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i>
                stackOverflow</a>
        </div>
        <br>
        <br>

        <form class="am-form" action="{{:U('User/login')}}" method="post">
            <div class="am-form-group am-form-icon am-form-feedback">
                <label class="am-form-label">用户名/邮箱/手机号: </label>
                <input type="text" id="username" name="username" class="am-form-field" placeholder="用户名/邮箱/手机号"
                       minlength="5" required>
            </div>
            <div class="am-form-group am-form-icon am-form-feedback">
                <label class="am-form-label" for="password">密码: </label>
                <input type="password" name="password" id="password" class="am-form-field" placeholder="输入你的密码" required>

                <i class="am-icon-eye-slash" id="ico" onclick="show()"></i>
                <!--<i class="am-icon-eye" id="ico" onclick="show()"></i>-->
                <div id="capital" style="display:none;">大写锁定已开启</div>
            </div>

            <label for="code">验证码:</label>
            <img src="" id="verify" alt="" style="cursor: pointer">
            <input type="text" name="code" id="code" value="" placeholder="请输入验证码"
                   required remote="{{:U('check_verify')}}">
            <br>
            <label>
                <input id="remember" value="1" type="checkbox">
                记住密码
            </label>
            <br/>
            <div class="am-cf">
                <input type="submit" name="" value="登 录" class=" submit am-btn am-btn-primary am-btn-sm am-fl">

                <a href="" class="am-btn am-btn-default am-btn-sm am-fr">忘记密码 ^_^?</a>
            </div>


        </form>
        <a href="{{:U('User/register')}}" style="margin-left: 900px;">您还没有账号，请先注册后登录~</a>

        <hr>
        <p>© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </div>
</div>
<script src="__PUBLIC__/vendor/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/vendor/validate/jquery.validate.js"></script>
<script src="__PUBLIC__/vendor/validate/localization/messages_zh.js"></script>
<script src="__PUBLIC__/assets/admin/js/login.js"></script>

<script>


    function show() {
        //var a = document.getElementById("inp").value;
        var aa = document.getElementById("ico").title;
        //alert();
        if (aa == "隐藏密码") {
            document.getElementById("password").type = "password";
            document.getElementById("ico").title = "显示密码";
//            document.getElementById("ico").class="am-icon-eye-slash";
        } else {
            document.getElementById("ico").title = "隐藏密码";
            document.getElementById("password").type = "text";
//            document.getElementById("ico").class="am-icon-eye";

        }
        $('#ico').toggleClass('am-icon-eye-slash am-icon-eye')



    }

    $(function () {
        function set_verify() {
            var src = "{{:U('User/verify')}}" + '?' + Math.random();
            $('#verify').attr('src', src);
        }

        set_verify();
        $('#verify').click(function () {
            set_verify();
        })

//        $('.submit').click(function () {
//            var info = {
//                username: $('#username').val(),
//                password: $('#password').val(),
//                code: $('#code').val(),
//                remember: $('#remember:checked').val()
//            }
//
//            //发送ajax请求
//            $.post("{{:U('ajax_login')}}", info, function (info) {
//                if (info.status == 1) {
//                    alert(info.msg);
//                    location.href = "{{:U('Index/index')}}"
//                } else {
//                    alert(info.msg);
//                    return false;
//                }
//            });
//            return false;
//        })

        $(".am-form").validate({
            onfocusout: function (element) {
                $(element).valid();
            }
        });


    })

</script>

</body>
</html>
